<template>
  <div class="majorEventsCell">
    <div class="top items-center">
      <div class="top-point"></div>
      <div class="top-time">{{ time }}</div>
    </div>
    <div class="bottom items-center">
      <div class="left items-center">
        <div class="left-line"></div>
        <Images class="left-img" :src="src" isHttp />
      </div>
      <div class="right">
        <div class="right-title">{{ title }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="majorEventsCell">
import { getOssFileUrl } from "@/utils";

const props = withDefaults(
  defineProps<{
    src: string;
    title: string;
    time: string;
  }>(),
  {
    src: "",
  }
);

const imgUrl = getOssFileUrl({
  placeholder: "/image/placeholder.png",
});
</script>

<style scoped lang="scss">
.majorEventsCell {
  padding-top: 24 * 2px;
  margin: 0 15 * 2px;
  box-sizing: content-box;
  .top {
    margin-bottom: 10 * 2px;
    &-point {
      width: 8 * 2px;
      height: 8 * 2px;
      border-radius: 100px;
      background-color: #007bff;
      border: 6px solid #e5f1ff;
      margin-right: 9 * 2px;
    }
    &-time {
      color: #141924;
      font-size: 13 * 2px;
    }
  }
  .bottom {
  }
  .left {
    &-line {
      width: 1 * 2px;
      height: 78 * 2px;
      margin: 0 15 * 2px 0 6 * 2px;
      background-color: #e5f1ff;
    }
    &-img {
      width: 140 * 2px;
      height: 78 * 2px;
      border-radius: 4 * 2px;
      overflow: hidden;
    }
  }
  .right {
    height: 78 * 2px;
    margin-left: 10 * 2px;
    line-height: 20 * 2px; /* 138.462% */
    align-items: flex-start;
    &-title {
      @include multi-line-omit(4);
      color: #999da7;
      font-size: 13 * 2px;
    }
  }
}
</style>
